* {
	margin: 0;
	padding: 0;
	
}

body {
	background: #00437a;
	overflow: hidden;
	font-family: "Futura W01", Arial, Helvetica, sans-serif;
}



/************* OWL **************/
.owl-theme .owl-nav {
position: absolute;
width: 100%;
top: 200px;
margin-top: -52px;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}

  .owl-theme .owl-nav [class*='owl-'] {
    color: #FFF;
    font-size: 14px;
    margin: 5px;
    padding: 4px 7px;
   
    display: inline-block;
    cursor: pointer;
    border-radius: 3px; }
   
   
   .owl-theme .owl-nav [class*='owl-']:hover {
      }
	  
	  
  .owl-theme .owl-nav .disabled {
    opacity: 0.5;
    cursor: default; }






  .owl-carousel {
  display: none;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  /* position relative and z-index fix webkit rendering fonts issue */
  position: relative;
   }
  .owl-carousel .owl-stage {
    position: relative;
    -ms-touch-action: pan-Y;
    touch-action: manipulation;
    -moz-backface-visibility: hidden;
    /* fix firefox animation glitch */ }
  .owl-carousel .owl-stage:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0; }
  .owl-carousel .owl-stage-outer {
    position: relative;
    overflow: hidden;
    /* fix for flashing background */
    -webkit-transform: translate3d(0px, 0px, 0px); }
  .owl-carousel .owl-wrapper,
  .owl-carousel .owl-item {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0); }
  .owl-carousel .owl-item {
    position: relative;
    min-height: 1px;
    float: left;
    -webkit-backface-visibility: hidden;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none; }
 
  .owl-carousel .owl-nav.disabled,
  .owl-carousel .owl-dots.disabled {
    display: none; }
  .owl-carousel .owl-nav .owl-prev,
  .owl-carousel .owl-nav .owl-next,
  .owl-carousel .owl-dot {
    cursor: pointer;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }
  .owl-carousel .owl-nav button.owl-prev,
  .owl-carousel .owl-nav button.owl-next,
  .owl-carousel button.owl-dot {
    background: none;
    color: inherit;
    border: none;
    padding: 0 !important;
    font: inherit; }
  .owl-carousel.owl-loaded {
    display: block; }
  .owl-carousel.owl-loading {
    opacity: 0;
    display: block; }
  .owl-carousel.owl-hidden {
    opacity: 0; }
  .owl-carousel.owl-refresh .owl-item {
    visibility: hidden; }
  .owl-carousel.owl-drag .owl-item {
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }
  .owl-carousel.owl-grab {
    cursor: move;
    cursor: grab; }
  .owl-carousel.owl-rtl {
    direction: rtl; }
  .owl-carousel.owl-rtl .owl-item {
    float: right; }

/* No Js */
.no-js .owl-carousel {
  display: block; }

/*
 *  Owl Carousel - Animate Plugin
 */
.owl-carousel .animated {
  animation-duration: 1000ms;
  animation-fill-mode: both; }

.owl-carousel .owl-animated-in {
  z-index: 0; }

.owl-carousel .owl-animated-out {
  z-index: 1; }

.owl-carousel .fadeOut {
  animation-name: fadeOut; }

@keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

/*
 * 	Owl Carousel - Auto Height Plugin
 */
.owl-height {
  transition: height 500ms ease-in-out; }

/*
 * 	Owl Carousel - Lazy Load Plugin
 */
.owl-carousel .owl-item {
  /**
			This is introduced due to a bug in IE11 where lazy loading combined with autoheight plugin causes a wrong
			calculation of the height of the owl-item that breaks page layouts
		 */ }
  .owl-carousel .owl-item .owl-lazy {
    opacity: 0;
    transition: opacity 400ms ease; }
  .owl-carousel .owl-item .owl-lazy[src^=""], .owl-carousel .owl-item .owl-lazy:not([src]) {
    max-height: 0; }
  .owl-carousel .owl-item img.owl-lazy {
    transform-style: preserve-3d; }

/*
 * 	Owl Carousel - Video Plugin
 */
.owl-carousel .owl-video-wrapper {
  position: relative;
  height: 100%;
  background: #fff; }

.owl-carousel .owl-video-play-icon {
  position: absolute;
  height: 80px;
  width: 80px;
  left: 50%;
  top: 50%;
  margin-left: -40px;
  margin-top: -40px;
  background: url("owl.video.play.png") no-repeat;
  cursor: pointer;
  z-index: 1;
  -webkit-backface-visibility: hidden;
  transition: transform 100ms ease; }

.owl-carousel .owl-video-play-icon:hover {
  -ms-transform: scale(1.3, 1.3);
      transform: scale(1.3, 1.3); }

.owl-carousel .owl-video-playing .owl-video-tn,
.owl-carousel .owl-video-playing .owl-video-play-icon {
  display: none; }

.owl-carousel .owl-video-tn {
  opacity: 0;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: opacity 400ms ease; }

.owl-carousel .owl-video-frame {
  position: relative;
  z-index: 1;
  height: 100%;
  width: 100%; }

.owl-carousel .owl-nav .owl-next,
.owl-carousel .owl-nav .owl-prev {
	width: 42px;
	height: 42px;
	position: absolute;
}

.owl-carousel .owl-nav .owl-prev {
	left: 0px;
}

.owl-carousel .owl-nav .owl-next {
	right: 0px;	
}

/*************** END OWL **************/  


.buttonreg {
    display: inline-block;
    padding: 15px 55px;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 0.6px;
    color: #004077;
    text-decoration: none;
    border-radius: 28px;
    background: #fff;
    transition: all 0.3s ease;
}

.buttonreg:hover {
    background: #f0f9ff;
}


.svgmap {
	display: block;
	width: 100%;	
	margin: 0 auto;
	margin-left: 0px;
	transition: all 0.5s ease;
}

.svgmap.blurme {
filter: blur(5px);
}

.svgmap.move {
	margin-left: 0px;
}


svg {
	margin: 0 auto;

}

	.st0{clip-path:url(#SVGID_00000001639050535178592620000016225413585764137606_);}
	.st1{fill:#7DA9DB;}
	.st2{fill:#0063AF;}
	.st3{fill:#E4032E;}
	.st4{fill:#004077;}
	
		.st5{clip-path:url(#SVGID_00000001639050535178592620000016225413585764137606_);fill:none;stroke:#EEEFF3;stroke-width:0.7087;stroke-miterlimit:10;}
	.st6{clip-path:url(#SVGID_00000130645403425353265640000009796399455711118493_);}
	
		.st7{clip-path:url(#SVGID_00000130645403425353265640000009796399455711118493_);fill:none;stroke:#EEEFF3;stroke-width:0.7087;stroke-miterlimit:10;}
	.st8{clip-path:url(#SVGID_00000044875706120645972540000000520566696824059275_);}
	
		.st9{clip-path:url(#SVGID_00000044875706120645972540000000520566696824059275_);fill:none;stroke:#EEEFF3;stroke-width:0.7087;stroke-miterlimit:10;}
	.st10{fill:#FFFFFF;}
	.st11{clip-path:url(#SVGID_00000082349208723205586540000012550421955786883240_);}
	
		.st12{clip-path:url(#SVGID_00000082349208723205586540000012550421955786883240_);fill:none;stroke:#EEEFF3;stroke-width:0.7087;stroke-miterlimit:10;}
	.st13{clip-path:url(#SVGID_00000138554542166037864420000001969645207821463967_);}
	
		.st14{clip-path:url(#SVGID_00000138554542166037864420000001969645207821463967_);fill:none;stroke:#EEEFF3;stroke-width:0.7087;stroke-miterlimit:10;}
	.st15{clip-path:url(#SVGID_00000060741381119370266350000018135726637693114243_);}
	
		.st16{clip-path:url(#SVGID_00000060741381119370266350000018135726637693114243_);fill:none;stroke:#EEEFF3;stroke-width:0.7087;stroke-miterlimit:10;}
	.st17{clip-path:url(#SVGID_00000077323440975018468550000009995986109042654882_);}
	
		.st18{clip-path:url(#SVGID_00000077323440975018468550000009995986109042654882_);fill:none;stroke:#EEEFF3;stroke-width:0.7087;stroke-miterlimit:10;}
	.st19{clip-path:url(#SVGID_00000181056559205101045070000002135875990282732459_);}
	
		.st20{clip-path:url(#SVGID_00000181056559205101045070000002135875990282732459_);fill:none;stroke:#EEEFF3;stroke-width:0.7087;stroke-miterlimit:10;}
	.st21{clip-path:url(#SVGID_00000003788105179953647720000002265399925581469839_);}
	
		.st22{clip-path:url(#SVGID_00000003788105179953647720000002265399925581469839_);fill:none;stroke:#EEEFF3;stroke-width:0.7087;stroke-miterlimit:10;}
	.st23{clip-path:url(#SVGID_00000073694682423574278270000014879730137844662197_);}
	
		.st24{clip-path:url(#SVGID_00000073694682423574278270000014879730137844662197_);fill:none;stroke:#EEEFF3;stroke-width:0.7087;stroke-miterlimit:10;}
	.st25{clip-path:url(#SVGID_00000095326179467409472530000007013505907834069669_);}
	
		.st26{clip-path:url(#SVGID_00000095326179467409472530000007013505907834069669_);fill:none;stroke:#EEEFF3;stroke-width:0.7087;stroke-miterlimit:10;}
	.st27{clip-path:url(#SVGID_00000069381031163421489410000010336638114688371856_);}
	
		.st28{clip-path:url(#SVGID_00000069381031163421489410000010336638114688371856_);fill:none;stroke:#EEEFF3;stroke-width:0.7087;stroke-miterlimit:10;}


#jeden {
	display: block;
	
}



		
#dwa {
	display: none;
}		

.all {
	transform: translate(10%,10%) scale(1.2);
}

.puzzle1 {
	transform: translate(-2%,-3%) scale(1.2);	
}


.puzzel.active .stroke {
 /* stroke: #FFFFFF!important;
  stroke-width: 4!important;  */
}
.puzzel.filter {
filter: contrast(130%);

}


.puzzle2 .stroke
.puzzle1 .stroke {
    stroke-width: 0!important; 
}


.t1active .puzzel.filter .stroke,
.t2active .puzzel.filter .stroke,
.t3active .puzzel.filter .stroke,
.t4active .puzzel.filter .stroke,
.t5active .puzzel.filter .stroke,
.t6active .puzzel.filter .stroke,
.t7active .puzzel.filter .stroke,
.t8active .puzzel.filter .stroke,
.t9active .puzzel.filter .stroke,
.t10active .puzzel.filter .stroke,
.puzzel.filter .stroke {
stroke: #FFFFFF!important;
  stroke-width: 8!important; 
}


.active .puzzle1,
.active .puzzle2,
.active .puzzle3,
.active .puzzle4,
.active .puzzle5,
.active .puzzle6,
.active .puzzle7,
.active .puzzle8,
.active .puzzle9,
.active .puzzle10,
.active .puzzle11,
.active .puzzle12 {
	transform: translate(0%,0%) scale(1);

	
}
.active .puzzle1,.active .puzzle2,.active .puzzle3,.active .puzzle4,.active .puzzle5,.active .puzzle6,.active .puzzle7,.active .puzzle8,.active .puzzle9,.active .puzzle10,.active .puzzle11,.active .puzzle12 {
	z-index: 1;
	opacity: 1;
	transition: all 0.3s ease;

}


 .active .puzzle3:hover, .active .puzzle4:hover, .active .puzzle5:hover, .active .puzzle6:hover, .active .puzzle7:hover, .active .puzzle8:hover, .active .puzzle9:hover, .active .puzzle10:hover,  .active .puzzle11:hover, .active .puzzle12:hover {
	z-index:8; 
	opacity: 0.9;
	transition-delay: 0s!important;

}



.puzzle3,
.puzzle4,
.puzzle5,
.puzzle6,
.puzzle7,
.puzzle8,
.puzzle9,
.puzzle10,
.puzzle11,
.puzzle12 {
	cursor: pointer;
}

.puzzel:hover.show,
.puzzel.show {
	opacity: 0.7;
   
}


.puzzle3:hover .stroke,
.puzzle4:hover .stroke,
.puzzle5:hover .stroke,
.puzzle6:hover .stroke,
.puzzle7:hover .stroke,
.puzzle8:hover .stroke,
.puzzle9:hover .stroke,
.puzzle10:hover .stroke,
.puzzle11:hover .stroke,
.puzzle12:hover .stroke {
    stroke-width: 8!important; 
}


.puzzel.puzzle2.show,
.puzzel.puzzle1.show {
	opacity: 1;
}

.puzzle2 {
	transform: translate(-3%,2%) scale(1.2);
}

.active .puzzle2 {
	transition-delay: 0.05s;
}

.puzzle3 {
	transform: translate(3%,-8%) scale(1.2);
}

.active .puzzle3 {
	transition-delay: 0.1s;
}

.puzzle4 {
	transform: translate(2%,-4%) scale(1.2);
}

.active .puzzle4 {
	transition-delay: 0.15s;
}

.puzzle5 {
	transform: translate(-6%,-4%) scale(1.2);
}

.active .puzzle5 {
	transition-delay: 0.2s;
}

.puzzle6 {
	transform: translate(-6%,5%) scale(1.2);
}

.active .puzzle6 {
	transition-delay: 0.25s;
}

.puzzle7 {
	transform: translate(-4%,-5%) scale(1.2);
}

.active .puzzle7 {
	transition-delay: 0.3s;
}

.puzzle8 {
	transform: translate(-2%,3%) scale(1.2);
}

.active .puzzle8 {
	transition-delay: 0.35s;
}

.puzzle9 {
	transform: translate(-9%,-10%) scale(1.2);
}

.active .puzzle9 {
	transition-delay: 0.4s;
}

.puzzle10 {
	transform: translate(3%,3%) scale(1.2);
}

.active .puzzle10 {
	transition-delay: 0.45s;
}

.puzzle11 {
	transform: translate(-5%,-4%) scale(1.2);
}

.active .puzzle11{
	transition-delay: 0.5s;
}

.puzzle12 {
	transform: translate(3%,-2%) scale(1.2);
}

.active .puzzle12 {
	transition-delay: 0.55s;
}


.car {
	top: 0;
	height: 100vh;
	left: 0;
	position: fixed;
	width: 0%;
	z-index: 10;		
	overflow: hidden;		
	transition: all 0.2s ease;
	transition-delay: 0.3s;
	 
}

.car.show {	
	width: 100%;	
	backdrop-filter: blur(2px);
	transition: all 0.3s ease;
	transition-delay: 0s;
	
}


.boxik {
	display: block;
	position: relative;
	width: 0px;
	overflow: hidden;
	height: 563px;
	top: calc(50% - 281px);
	left: calc(40% - 600px);
	transition: all 0.4s ease;	
}

.show .boxik {
	width: 1200px;
left: calc(50% - 600px);
	box-shadow: 0px 0px 80px 0px rgba(0,41,74,0.8);
	transition-delay: 0.2s;
}

.slides {
	display: block;
	width: 1200px;
	height: 563px;
}



.slides li {
	display: block;
	position: relative;	
	overflow: hidden;
}

.slides li img {
    position: relative;
    z-index: 1;
width: 78%;
height: auto;
margin-left: 370px;
transform: scale(1);
transition: all 0.2s ease;
}

.slides .active li img {
margin-left: 410px;
transition: all 3.4s ease;
}

.slides li .descript {
	position: absolute;
    background: #004077;
	left: 0px;
	top: 0px;    
    box-sizing: border-box;
    padding: 50px;
    padding-top: 150px;
    padding-left: 80px;
  
    width: 500px;
    height: 563px;
    border-radius: 0px 42px 42px 0px;    
	z-index: 2;
}

.slides li .descript h3 {
font-size: 42px;
letter-spacing: 0.4px;
line-height: 115%;
color: #fff;
font-weight: 600;
position: relative;
top: 30px;
opacity: 0;
transition: all 0.1s ease;
transition-delay: 0s;
}

.slides .active li .descript h3 {
    top: 0px;
    opacity: 1;
    transition: all 0.4s ease;
    transition-delay: 0.4s;
}

.slides li .descript p {
font-size: 24px;
position: relative;
margin: 40px 0;
line-height: 125%;
font-weight: 200;
color: #fff;
top: 30px;
opacity: 0;
transition: all 0.1s ease;
transition-delay: 0s;
}

.slides .active li .descript p {
    top: 0px;
    opacity: 1;
    transition: all 0.4s ease;
    transition-delay: 0.6s;
}


.wlc {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 0%;
    height: 0vh;
    z-index: 10;
    transition: all 0s ease;
    transition-delay: 1s;
}

.wlc.show {
    width: 100%;
    height: 100vh;
    transition-delay: 0s;
}


.welcome {
    display: block;
    padding: 50px;
    color: #fff;
    position: absolute;
    top: calc(-10% - 96px);
    left: calc(50% - 350px);
  
    font-size: 24px;
    letter-spacing: 0.4px;
    background: #004077;
    opacity: 0;
    width: 600px;
    box-shadow: 0px 0px 80px 0px rgba(0,41,74,0.8); 
    transition: all 0.5s ease;
}

.show .welcome {
top: calc(50% - 96px);
opacity: 1;
}


.closeme {
	display: block;
	position: absolute;
	right: 0px;
	top: 0px;
	width: 60px;
	height: 60px;
	cursor: pointer;
    transform: scale(0.8);
	z-index: 2;
}

.welcome .closeme span {
background: #fff;
}


.closeme span {
		position: absolute;
	display: block;
	width: 0px;
	height: 5px;
	top: 28px;
	left: 10px;
	background: #000;
	transition: all 0.3s ease;
}

.closeme span:nth-child(1) {	
	transform: rotate(45deg);
}
.closeme span:nth-child(2) {	
	transform: rotate(-45deg);
}


.show .closeme span:nth-child(1) {	
	width: 40px;
	transition-delay: 0.5s;
}

.show .closeme span:nth-child(2) {	
	width: 40px;
	transition-delay: 0.7s;
}

svg#jeden {
    height: 1400px;
}


svg.left {
	position: absolute;
	left: -80px;
	top: 233px;
	width: 80px;
    transform: scale(0.4);
	height: 80px;
    padding: 10px;
    z-index: 5;
	cursor: pointer;
    border-radius: 0px 20px 20px 0px;
	opacity: 0;	
	transition: all 0.3s ease;
	transition-delay: 0s;
    background-color: #000;

	}

svg.right {
	position: absolute;
	right: -80px;
	top: 233px;
	width: 80px;
    padding: 10px;
    z-index: 5;
    transform: scale(0.4);
	height: 80px;
    border-radius: 20px 0px 0px 20px;
	cursor: pointer;
	opacity: 0;
	transition: all 0.3s ease;
	transition-delay: 0s;
    background-color: #000;
}



.active svg.left {
	left: -30px;
	transition-delay: 0.6s;
	opacity: 1;
}

.active svg.right {
	right: -30px;
	opacity: 1;
	transition-delay: 0.6s;
}


@media screen and (min-width:1920px) and (max-width:2559px) {
#jeden {
width: 1920px;
height: 1080px;
}

svg#jeden {
    height: 1050px;
}


}

@media screen and (min-width:1600px) and (max-width:1919px) {
    #jeden {
    width: 1600px;
    height: 1000px;
    }
    
    svg#jeden {
        height: 1000px;
    }
    
    .boxik {
        transform: scale(0.8);
    }
    
    }

    
@media screen and (min-width:1360px) and (max-width:1599px) {
        #jeden {
        width: 1366px;
        height: 900px;
        }        
        svg#jeden {
            height: 900px;
        }        
        .boxik {
            transform: scale(0.8);
        }
        
}    

@media screen and (min-width:1200px) and (max-width:1365px) {
    #jeden {
    width: 1300px;
    height: 1024px;
    }        
    svg#jeden {
        height: 1024px;
    }        
    .boxik {
        transform: scale(0.8);
    }
    
}    

@media screen and (min-width:980px) and (max-width:1199px) {
    #jeden {
    width: 1100px;
    height: 1224px;
    }     

    svg#jeden {
        height: 1224px;
    }        

    .boxik {
        transform: scale(0.8);
    }

    .slides li .descript {
        border-radius: 42px 42px 0px 0px;
        width: 100%;
        top: 500px;
        padding-top: 50px;
        height: 363px;
        padding-left: 50px;
    }

    .slides { 
        width: 1000px;    
        height: 863px;
    }

    .boxik {     
        height: 863px;
        top: calc(50% - 431px);
        left: calc(40% - 500px);
        transition: all 0.4s ease;	
    }

        
    .show .boxik {
        width: 1000px;
        left: calc(50% - 500px);
    }
      
    
        .slides li img {        
    margin-left: 0px;  
    width: 100%;
  padding-bottom: 300px;
    }

    .slides .active li img {
        transform: scale(1.05);
        margin-left: 0px;        
        padding-bottom: 300px;

    }

    svg.left {        
        transform: scale(0.8);        
        top: 320px;
    }

    svg.right {        
        transform: scale(0.8);
        top: 320px;
    }

    .active svg.right {
        right: -10px;
    }

    .active svg.left {
        left: -10px;
    }


}    




@media screen and (min-width:768px) and (max-width:979px) {
    #jeden {
    width: 880px;
    height: 1024px;
    }        
    svg#jeden {
        height: 1024px;
    }        
    .boxik {
        transform: scale(0.8);
    }

    .slides li .descript {
        border-radius: 42px 42px 0px 0px;
        width: 100%;
        top: 400px;
        padding-top: 50px;
        height: 363px;
        padding-left: 50px;
    }

    .slides { 
        width: 700px;    
        height: 763px;
    }

    .boxik {     
        height: 763px;
        top: calc(50% - 381px);
        left: calc(40% - 350px);
        transition: all 0.4s ease;	
    }

        
    .show .boxik {
        width: 700px;
        left: calc(50% - 350px);
    }
      
    

        .slides li img {        
    margin-left: 0px;  
    width: 100%;
  padding-bottom: 300px;
    }

    .slides .active li img {
        transform: scale(1.05);
        margin-left: 0px;        
        padding-bottom: 300px;

    }

    svg.left {        
        transform: scale(0.6);        
        top: 320px;
    }

    svg.right {        
        transform: scale(0.6);
        top: 320px;
    }

    .active svg.right {
        right: -20px;
    }

    .active svg.left {
        left: -20px;
    }

}   




@media screen and (min-width:600px) and (max-width:767px) {
    #jeden {
    width: 680px;
    height: 1024px;
    }        
    svg#jeden {
        height: 1024px;
    }        
    .boxik {
        transform: scale(0.8);
    }

    .welcome { 
        width: 500px;
        box-sizing: border-box;
        left: calc(50% - 250px);
    }

    .slides li .descript {
        border-radius: 42px 42px 0px 0px;
        width: 100%;
        top: 400px;
        padding-top: 50px;
        height: 363px;
        padding-left: 50px;
    }

    .slides { 
        width: 700px;    
        height: 763px;
    }

    .boxik {     
        height: 763px;
        top: calc(50% - 381px);
        left: calc(40% - 350px);
        transition: all 0.4s ease;	
    }

        
    .show .boxik {
        width: 700px;
        left: calc(50% - 350px);
    }
      
    

        .slides li img {        
    margin-left: 0px;  
    width: 100%;
  padding-bottom: 300px;
    }

    .slides .active li img {
        transform: scale(1.05);
        margin-left: 0px;        
        padding-bottom: 300px;

    }

    svg.left {        
        transform: scale(0.6);        
        top: 320px;
    }

    svg.right {        
        transform: scale(0.6);
        top: 320px;
    }

    .active svg.right {
        right: -20px;
    }

    .active svg.left {
        left: -20px;
    }

}   



@media screen and (min-width:0px) and (max-width:599px) {
    #jeden {
    width: 120%;
    height: 724px;
    }        
    svg#jeden {
        height: 100vh;
    }        
 
    .welcome { 
        width: 310px;
        box-sizing: border-box;
        left: calc(50% - 160px);
        top: calc(10% - 488px);
    }
    
    .show .welcome {
        top: calc(50% - 188px);
        
    }

    .slides li .descript {
        border-radius: 42px 42px 0px 0px;
        width: 100%;
        top: 230px;
        padding-top: 50px;
        height: calc(100vh - 100px);
        padding-left: 50px;
    }

    .slides li .descript h3 {
        font-size: 32px;
    }

    .slides li .descript p {
        font-size: 22px;
        line-height: 32px;
    }

    .slides svg {
        display: none!important;
    }


    svg.left {        
        transform: scale(0.5);        
        top: 520px;
        left: -30px;
        opacity: 1;
      
    }


    svg.right {        
        transform: scale(0.5);
        top: 520px;
        opacity: 1;
        right: -30px;
     
    }

    .active svg.right {
        right: -30px;
    }

    .active svg.left {
        left: -30px;
    }



    .slides li img {        
        margin-left: 0px;  
        width: 100%;
        padding-bottom: 550px;
        }
        
        
        .slides .active li img {
            transform: scale(1.05);
            margin-left: 0px;        
        }

}   



@media screen and (min-width:360px) and (max-width:389px) {
.slides { 
    width: 360px;    
    height: 863px;
}

.boxik {     
    height: 863px;
    top: 0px;
    left: calc(40% - 180px);
    transform: scale(1);
    transition: all 0.4s ease;	
}
    
.show .boxik {
    width: 360px;
    left: calc(50% - 180px);
}

}

@media screen and (min-width:390px) and (max-width:413px) {
    .slides { 
        width: 413px;    
        height: 863px;
    }
    
    .boxik {     
        height: 863px;
        top: 0px;
        left: calc(40% - 207px);
        transform: scale(1);
        transition: all 0.4s ease;	
    }
        
    .show .boxik {
        width: 413px;
        left: calc(50% - 207px);
    }
    
    }


@media screen and (min-width:414px) and (max-width:414px) {
    .slides { 
        width: 414px;    
        height: 863px;
    }
    
    .boxik {     
        height: 863px;
        top: 0px;
        left: calc(40% - 207px);
        transform: scale(1);
        transition: all 0.4s ease;	
    }
        
    .show .boxik {
        width: 414px;
        left: calc(50% - 207px);
    }
      
    
    
    }


    @media screen and (min-width:415px) and (max-width:599px) {
        .slides { 
            width: 414px;    
            height: 863px;
        }
        
        .boxik {     
            height: 863px;
            top: 0px;
            left: calc(40% - 207px);
            transform: scale(1);
            transition: all 0.4s ease;	
        }
            
        .show .boxik {
            width: 414px;
            left: calc(50% - 207px);
        }
          
        
        
        }